<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 常用属性</title>

    <style>
        .block {
            background-color: aqua;
            width: 200px;
        }

        .inline {
            background-color: rgb(255, 191, 0);
        }

        .Inlineblock {
            width: 100px;
            height: 200px;
        }
        .divinline{
            display: inline;
        }
        .spanblock{
            display: inline-block;
            background-color: red;
            height: 200px;
        }
    </style>

</head>

<body>
    <!-- 块、行内、行内块元素 -->
    <!-- 块元素(block):
    块级元素通常会从新行开始，并占据整行的宽度。
    可以包含其他块级元素和行内元素。

    行内元素(inline)
    行内元素通常在同一行内呈现，不会独占一行。
    它们只占据其内容所需的宽度，而不是整行的宽度。
    行内元素不能包含块级元素，但可以包含其他行内元素。

    行内块元素(Inline-block)
    水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。
    行内块元素可以包含其他行内元素或块级元素。 -->
    <h1 style="font: bolder 50px 'kaiti';">复合函数 一个属性里面能包含多个属性值</h1>

    <p style="line-height: 40px;">一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章
        一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章一段文章</p>

    <div  class="block">这是块级元素</div>
    <sapn class="inline">这是行内元素</sapn>
    <img class="Inlineblock" src="/images/logo.jpg" alt="">
    <div class="divinline" > divinline div转换成 inline 元素</div>
  
    <span class="spanblock" > spanblock span转换成 block  元素</span>
</body>

</html>